<template>
  <div>
    <van-dialog
      v-model:show="showDialog"
      :showConfirmButton="false"
      :showCancelButton="false"
    >
      <div class="c-linear-D5E2FF p-20 w-325 rounded-15 text-333333 relative">
        <svg-icon
          v-if="!showCancelButton"
          name="icon-shanchuxian"
          :size="14"
          color="#333"
          class="absolute right-20 top-15"
          @click="showDialog = false"
        />
        <div class="text-center text-16 font-bold">{{ title }}</div>
        <div class="mt-15 text-center text-14">{{ content }}</div>
        <div v-if="showButton" class="flex mt-20">
          <div
            v-if="showCancelButton"
            class="mr-10 leading-44 h-44 rounded-10 bg-EEEEEE font-bold text-16 text-center flex-1"
            @click="handleCancel"
          >
            {{ cancelText }}
          </div>
          <div
            v-if="showConfirmButton"
            class="c-linear-purple mx-auto max-w-215 leading-44 h-44 rounded-10 text-white font-bold text-16 text-center flex-1"
            @click="handleConfirm"
          >
            {{ confirmText }}
          </div>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
defineOptions({
  name: "WarningTips"
});
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: "提示"
  },
  content: {
    type: String,
    default: ""
  },
  // 是否显示按钮
  showButton: {
    type: Boolean,
    default: true
  },
  // 是否取消显示按钮
  showCancelButton: {
    type: Boolean,
    default: true
  },
  // 是否确认显示按钮
  showConfirmButton: {
    type: Boolean,
    default: true
  },
  cancelText: {
    type: String,
    default: "取消"
  },
  confirmText: {
    type: String,
    default: "确定"
  }
});
// 父组件调用emit方法，通知子组件
const emit = defineEmits(["update:visible", "confirm", "cancel"]);

// 弹窗内部状态
const showDialog = ref(props.visible);

// 监听父组件传入的visible变化
watch(
  () => props.visible,
  newVal => {
    showDialog.value = newVal;
  }
);

// 监听弹窗内部状态变化，通知父组件
watch(showDialog, newVal => {
  if (!newVal) {
    emit("update:visible", false);
  }
});
// 处理取消按钮点击
const handleCancel = () => {
  emit("cancel");
  showDialog.value = false;
};

// 处理确定按钮点击
const handleConfirm = () => {
  emit("confirm");
  showDialog.value = false;
};
</script>

<style scoped></style>
